import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Image ,Input} from '@tarojs/components'
import './Screen.css'
import { AtAvatar, AtList, AtListItem, AtInput, AtForm, AtButton, AtGrid,AtSearchBar,AtTag } from "taro-ui"
import app from '../../main';


export default class Screen extends Component {

    config = {
        navigationBarTitleText: '搜索'
    }

    constructor () { 
        super(...arguments); 
        this.state = {
            value:'',
            res:'',
            job:['程序员','文员','秘书','司机','经理'],
            sex:['男','女'],
        }
    }

    changjob = e =>{
        let arr = this.state.res
        arr.job = this.state.job[e.detail.value]
        this.setState({
            res:arr
        })
    }

    changsex = e =>{
        let arr = this.state.res
        arr.sex = this.state.sex[e.detail.value]
        this.setState({
            res:arr
        })
    }

    changdata = e => {
        let arr = this.state.res
        arr.birthday = e.detail.value
        this.setState({
            res:arr
        })
    }

    handleChange(value){
        this.setState({
            value:value
        })
    }

    get(){
        let me = this
        let data = {
            id:this.state.value
        }
        app.get('http://localhost/vc/public/api/vcTests', data ,function(res){
            console.log(res)
            me.setState({
                res:res.data[0]
            })
        })
    }

    search(){
        this.get();
    }

    insert(){
        let me = this
        let data = this.state.res
        app.post('http://localhost/vc/public/api/vcTests/insert', data, function(res){
            me.get();
        })
    }

    componentWillMount(){
        this.get();
    }


    render () {
        return (
            <View className='index'>
                <AtInput
                    clear
                    type='number'
                    maxLength='6'
                    title='输入id查询信息'
                    placeholder='输入id查询信息'
                    value={this.state.value}
                    onChange={this.handleChange.bind(this)}
                    >                  
                </AtInput>

                <AtButton onClick={this.search} className='btn' type='primary'>查询</AtButton>

                <AtList style={this.state.res == '' ? 'display:none' : ''}>
                    <AtListItem title='名字' extraText={this.state.res.name} />
                    <AtListItem title='id' extraText={this.state.res.id} />
                    <Picker mode='selector' range={this.state.sex} onChange={this.changsex}>
                        <AtListItem title='性别' arrow='right' extraText={this.state.res.sex} />  
                    </Picker>
                    <Picker mode='selector' range={this.state.job} onChange={this.changjob}>
                        <AtListItem title='职业' arrow='right' extraText={this.state.res.job} />  
                    </Picker>
                    <Picker mode='date' onChange={this.changdata}>
                        <AtListItem extraText={this.state.res.birthday} arrow='right' title='出生日期' />     
                    </Picker>
                </AtList>

                <AtButton onClick={this.insert} className='btn' type='primary' style={this.state.res == '' ? 'display:none' : ''} >修改信息</AtButton>

            </View>
        )
    }
}
